<template>
	<view class="myactivity_box" :style="{ paddingBottom: bottomPadding }">
		<!-- left-text="返回"  @clickLeft="back"  left-icon="left"  -->
		<!-- <uni-nav-bar :fixed="true" :border="false" status-bar title="活动信息" left-icon="left" @clickLeft="back" /> -->
		<view class="list_box" v-if="list.length>0">
			<view class="list_item" v-for="(item,index) in list" :key="index" @click="item_click(index)">
				<view class="hd_cy">
					<view class="hd_cy_name">
						{{item.name}}
					</view>
					<view class="san_bun1" style="background-color: #FFF7EB;color: #EBA218;border: #EBA218;"
						v-if="item.status==1&&currentTimestamp<item.hdks">
						未开始
					</view>
					<view class="san_bun1" style="background-color: #EBFFEE;color: #53CB61;border: #53CB61;"
						v-if="item.status==1&&currentTimestamp>item.hdks">
						进行中
					</view>
					<view class="san_bun1" style="background-color: #EFEFEF;color: #868686;border:#868686;"
						v-if="item.status==4">
						已结束
					</view>
					<view class="san_bun1" style="background-color: #EAECFF;color: #3E69CC;border: #3E69CC;"
						v-if="item.status==0">
						未发布
					</view>
				</view>
				<view class="ls_top">
					<view class="img">
						<image style="width: 100%; height: 100%;border-radius: 8rpx;"
							:src="`${ym}/${item.template.url}`" mode="scaleToFill">
						</image>
					</view>
					<view class="text_box">

						<view class="hd_text">
							活动{{item.id}}
						</view>

						<view class="inco">
							<uni-tooltip content="参与次数">
								<view class="img_box1">

									<image class="img1" src="../../static/14.png" mode="scaleToFill"></image>
									<view class="img_text">
										{{item.count_list.draw}}
									</view>
								</view>
							</uni-tooltip>

							<uni-tooltip content="分享次数">
								<view class="img_box2">
									<image class="img2" src="../../static/15.png" mode="scaleToFill"></image>
									<view class="img_text">
										{{item.count_list.record}}
									</view>
								</view>
							</uni-tooltip>
							<uni-tooltip content="获奖次数">
								<view class="img_box3">
									<image class="img3" src="../../static/16.png" mode="scaleToFill"></image>
									<view class="img_text">
										{{item.count_list.draw_win}}
									</view>
								</view>
							</uni-tooltip>
						</view>
					</view>
				</view>
				<view class="ls_buun" @click="item_gl(item)">
					<view class="guanli_text">
						<!-- <image class="img" src="../../static/13.png" mode="scaleToFill"></image> -->管理
					</view>
				</view>

			</view>
		</view>
		<view class="noAcivity" v-else>
			暂无活动
		</view>




		<!-- 底部弹出 -->
		<uni-popup ref="popup" type="bottom">
			<!-- 底部编辑 v-if="list_item_bj_true"-->
			<view class="ls_bj">
				<view class="f_fb_box">
					<view class="fb" @click="fb_fn1" v-if="item.status==0">
						<view class="img">
							<image
								style="width: 80rpx; height: 80rpx; padding: 10rpx;border-radius: 22rpx 22rpx 22rpx 22rpx;"
								src="../../static/8.png" mode="scaleToFill"></image>
						</view>
						<view class="fb_text">
							发布
						</view>
					</view>
					<view class="fb" @click="js_fn1" v-if="item.status==1&&currentTimestamp>item.hdks">
						<view class="img">
							<image
								style="width: 80rpx; height: 80rpx; padding: 10rpx;border-radius: 22rpx 22rpx 22rpx 22rpx;"
								src="../../static/17.png" mode="scaleToFill"></image>
						</view>
						<view class="fb_text">
							结束
						</view>
					</view>
					<view class="fb" @click="yulanfn">
						<view class="img">
							<image
								style="width: 80rpx; height: 80rpx; padding: 10rpx;border-radius: 22rpx 22rpx 22rpx 22rpx;"
								src="../../static/9.png" mode="scaleToFill"></image>
						</view>
						<view class="fb_text">
							预览
						</view>
					</view>
					<view class="fb" @click="bj_fn1">
						<view class="img">
							<image
								style="width: 80rpx; height: 80rpx; padding: 10rpx;border-radius: 22rpx 22rpx 22rpx 22rpx;"
								src="../../static/10.png" mode="scaleToFill"></image>
						</view>
						<view class="fb_text">
							编辑
						</view>
					</view>
					<view class="fb" @click="yh_fn1">
						<view class="img">
							<image
								style="width: 80rpx; height: 80rpx;padding: 10rpx;border-radius: 22rpx 22rpx 22rpx 22rpx;"
								src="../../static/11.png" mode="scaleToFill"></image>
						</view>
						<view class="fb_text">
							用户数据
						</view>
					</view>

				</view>
				<view class="qx_box" @click="qximg">
					<image class="qximg" src="../../static/12.png" style="width: 40rpx; height: 40rpx;"
						mode="scaleToFill">
					</image>
				</view>
			</view>
			<!-- ------底部编辑----- -->


		</uni-popup>


		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="确定" title="结束活动"
				content="活动结束后，活动数据会保留，访客进入活动页面将无法参与该活动" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>



	</view>
</template>

<script>
	export default {
		onShow() {
			uni.getStorage({
				key: 'fabcg',
				success: (res) => {
					uni.showToast({
						title: res.data,
						icon: 'success',
						duration: 3000
					});
					this.list_item_bj_true = false
					uni.removeStorage({
						key: 'fabcg'
					});
				}
			});
			this.taskIndex()
		},

		data() {
			return {
				list_item_bj_true: false,
				fb_qx_bj: true,
				list_item_bj_index: null,
				page: 1,
				num: 10,
				count: null,
				ym: uni.imgPath,
				list: [],
				hdks: null,
				hdjs: null,
				currentTimestamp: null, //当前时间
				bottomPadding: '100rpx', // 初始值
				item: null,
				draw_win_num: 0, //中奖数量
				record_num: 0, //访问数量
				draw_num: 0, //参与次数
			};
		},
		// 监听用户点击右上角菜单的「转发」按钮时触发的事件
		onShareAppMessage() {
			// 设置转发的参数
			return {
				title: '天天幸运站',
				path: 'pages/home/home',
				imageUrl: '../../static/31.png',
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '天天幸运站',
				type: 0,
				summary: "",
			}
		},
		// 下拉加载
		onPullDownRefresh() {
			this.list = []
			this.num = 10
			this.taskIndex()
		},
		// 上拉加载
		onReachBottom() {

			if (this.count - this.num <= 10) {
				this.num = this.count
			} else {
				this.num = this.num + 10
			}
			this.taskIndex()
		},
		methods: {
			// 获取活动列表
			taskIndex() {
				// this.list = []
				uni.$http.post('/user/task/taskIndex', {
					page: this.page,
					num: this.num,
				}).then(res => {
					console.log(res.data.data.count);
					this.count = res.data.data.count
					this.list = res.data.data.list
					this.list.forEach((item, index) => {
						// 开始时间
						let yourDateStr = item.draw_startime;
						let yourDate = new Date(yourDateStr);
						let yourTimestamp = yourDate.getTime();
						// 结束时间
						let yourDateStr2 = item.draw_endtime;
						let yourDate2 = new Date(yourDateStr2);
						let yourTimestamp2 = yourDate2.getTime();
						// 获取当前时间戳
						this.currentTimestamp = new Date().getTime();
						item.hdks = yourTimestamp //开始时间
						item.hdjs = yourTimestamp2 //结束时间
					})
					uni.stopPullDownRefresh(); //关闭下拉刷新
				})
			},
			item_click(index) {
				this.list_item_bj_index = index
			},
			back() {
				uni.navigateBack();
			},
			// 管理
			item_gl(item) {
				this.item = item
				console.log(this.item);
				this.list_item_bj_true = !this.list_item_bj_true;
				this.bottomPadding = this.list_item_bj_true ? '420rpx' : '100rpx';
				this.$refs.popup.open()
			},
			// 结束活动确定
			dialogConfirm() {
				uni.$http.post('/user/task/btnEnding', {
					id: this.item.id
				}).then(res => {
					this.taskIndex()
					uni.showToast({
						title: "活动结束成功！",
						icon: 'success',
						duration: 3000
					});
				})
				this.qximg()
				this.list_item_bj_true = false
			},
			dialogClose() {

			},
			// 取消弹层
			qximg() {
				this.list_item_bj_true = false
				this.bottomPadding = this.list_item_bj_true ? '420rpx' : '100rpx';
				this.$refs.popup.close()
			},
			js_fn1() {
				this.$refs.alertDialog.open()
			},
			// 预览
			yulanfn() {
				this.qximg()
				console.log(this.item);
				uni.navigateTo({
					url: '/packages/rafflehome/rafflehome?name=' + this.item.name +
						'&bagimg=' + `${this.ym}/${this.item.template.url}` + '&hdid=' + String(
							this.item.id) + '&yltrue=1&status=' + this.item.status + '&draw_startime=' + this.item
						.draw_startime
				});
			},
			fb_fn1() {
				this.qximg()
				uni.navigateTo({
					url: '/packages/release/release?id=' + this.item.id
				});
			},
			// 编辑
			bj_fn1() {
				this.qximg()
				uni.navigateTo({
					url: '/packages/Creation/Creation?id=' + this.item.id
				});
			},
			// 用户数据
			yh_fn1() {
				this.qximg()
				console.log(this.item);
				uni.navigateTo({
					url: '/packages/userdata/userdata?id=' + this.item.id + '&status=' + this.item.status +
						'&item=' + JSON.stringify(this.item)
				});
			},
		}
	}
</script>

<style lang="scss">
	.myactivity_box {
		padding: 30rpx;
		padding-top: 56rpx;
		padding-bottom: 100rpx;
		position: relative;
		background: #F5F9FF;
		min-height: 100vh;

		.ls_bj {
			width: 100%;
			height: 400rpx;
			background: #EAF2FB;
			box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 14rpx 14rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.qx_box {
				width: 100%;
				height: 100rpx;
				position: absolute;
				bottom: 10%;
				left: 0;

				.qximg {
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%)
				}
			}




			.f_fb_box {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 40%;
				left: 0;
				transform: translateY(-50%);

				.fb {
					height: 150rpx;
					padding: 10rpx;
					flex: 1;

					.img {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.fb_text {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 10rpx;
					}
				}
			}


		}

		.active {
			bottom: 0 !important; // 活动状态
		}

		.noAcivity {
			font-size: 28rpx;
			color: #555;
			text-align: center;
			line-height: 200rpx;
		}

		.list_box {
			position: relative;

			.list_item {
				margin-bottom: 56rpx;
				position: relative;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 20rpx;
				padding-bottom: 0;

				.hd_cy {
					font-size: 28rpx;
					margin-bottom: 20rpx;
					border-bottom: 2rpx dashed #707070;
					padding-bottom: 15rpx;
					position: relative;

					.hd_cy_name {
						width: 80%;
						overflow: hidden;
						/* 隐藏超出的部分 */
						text-overflow: ellipsis;
						/* 显示省略号 */
						white-space: nowrap;
						/* 防止文本换行 */
					}

					.san_bun1 {
						position: absolute;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						width: 110rpx;
						height: 40rpx;
						top: -4rpx;
						right: 0;
						// background-color: #007CFF;
						border-radius: 25rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.ls_top {
					display: flex;
					position: relative;
					padding-bottom: 20rpx;

					// 右文字
					.text_box {
						width: 50%;
						margin-left: 26rpx;
						// padding-top: 46rpx;
						position: relative;



						.hd_text {
							font-size: 28rpx;
							margin-bottom: 10rpx;
						}



						.inco {
							width: 90%;
							margin-top: 20rpx;
							display: flex;
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #888888;


							.uni-tooltip-popup {
								width: 100rpx;
								left: -50%;
								bottom: -100rpx;
								transform: translateX(-15%);
							}

							.img_box1 {
								display: flex;
								justify-content: center;
								align-items: center;
								flex: 1;
								margin-right: 20rpx;

								.img1 {
									width: 40rpx;
									height: 40rpx;
									margin-right: 10rpx;
								}

								.img_text {
									line-height: 60rpx;
									height: 40rpx;
									font-size: 24rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: #888888;
									margin-right: 10rpx;
								}
							}

							.img_box2 {
								display: flex;
								justify-content: center;
								align-items: center;
								flex: 1;
								margin-right: 20rpx;

								.img2 {
									width: 40rpx;
									height: 40rpx;
									margin-right: 10rpx;
								}

								.img_text {
									line-height: 60rpx;
									height: 40rpx;
									font-size: 24rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: #888888;
									margin-right: 10rpx;
								}
							}

							.img_box3 {
								display: flex;
								justify-content: center;
								align-items: center;
								flex: 1;
								margin-right: 20rpx;

								.img3 {
									width: 40rpx;
									height: 40rpx;
									margin-right: 10rpx;
								}

								.img_text {
									line-height: 60rpx;
									height: 40rpx;
									font-size: 24rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: #888888;
									margin-right: 10rpx;
								}
							}
						}
					}

					// 左图片
					.img {
						height: 150rpx;
						width: 30%;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
				}

				.ls_buun {
					position: absolute;
					right: 15rpx;
					bottom: 15rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 50rpx;
					width: 140rpx;
					background: linear-gradient(180deg, #356AFA 0%, #34B8FD 100%);
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					.guanli_text {
						width: 100%;
						height: 50rpx;
						position: absolute;
						left: 0;
						bottom: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;

						// .img {
						// 	width: 70rpx;
						// 	height: 50rpx;
						// }
					}
				}

			}


		}
	}
</style>